﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../fly-comment.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <link href="../../plugins/themes/blue/button.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/pager.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            var buttons = []

            buttons.push(
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                text: "Simple button"
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                text: "Toggle buttonadd",
                enableToggle: true
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                text: "add"
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                iconCss: "f-btn-first",
                text: "Previous"
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                iconCss: "f-btn-first",
                text: "上一页",
                width: 100
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                iconCss: "f-btn-previous"
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                iconCss: "f-btn-next"
            })
            ,
            new $.ui.BaseButton(
            {
                renderTo: "#simpleButton",
                css: "f-btn-rect",
                iconCss: "f-btn-last"
            })
            ,
            new $.ui.Button(
            {
                text: 'Simple button',
                handler: function () {
                    alert(this.text)
                },
                iconCss: 'f-btn-first',
                renderTo: "#button"
            })
            ,
            new $.ui.Button(
            {
                text: 'Toggle button',
                handler: function () {
                    alert(this.text)
                },
                iconCss: 'f-btn-previous',
                enableToggle: true,
                size: "medium",
                renderTo: "#button"
            })
            ,
            new $.ui.Button(
            {
                text: 'Toggle button',
                handler: function () {
                    alert(this.text)
                },
                iconCss: 'f-btn-next',
                enableToggle: true,
                size: "large",
                iconPos: "right",
                renderTo: "#button",
                width: 200
            }))

            var i = 0
            while (i++ < 20) {
                buttons.push(new $.ui.Button(
                {
                    text: 'Toggle button',
                    handler: function () {
                        alert(this.text)
                    },
                    iconCss: 'f-btn-next',
                    enableToggle: true,
                    size: "large",
                    iconPos: "right",
                    renderTo: "#button",
                    width: 200
                }))
            }

            document.onmouseup0 = function () {
                buttons.each(function () {
                    this.destroy()
                })
            }
        })

        
    </script>
</head>
<body>
    <style>
        /*
     a:hover button
            {
            	color:Red;
            }
        
        a:hover
        {
        	color:Red;
        }
        
        
            a:active button
            {
            	color:Yellow;
            }
        
        a:active
        {
        	color:Yellow;
        } */
    </style>
    <div style="height: 100px; border: 1px solid black; vertical-align: middle; display: inline-block">
        <span>aaa<em>sfff</em>aaaaa<em style="height: 40px">saa</em>sssssssss</span>
    </div>
    <a href="" unselectable="on">aa<input type="button" value="ssssss" />eee</a>
    <div id="simpleButton">
    </div>
    <br />
    <div id="button">
    </div>
</body>
</html>
